<template>
	<div>
		<span
			class="option"
			:class="{
				'option--active': option.type == value.type
			}"
			v-for="option in options"
			:key="option.type"
			@click="valueChange(option.type)"
			>{{ option.label }}</span
		>

		<el-date-picker
			:value="value.dates"
			@input="(val) => $emit('value-change', { type: '', dates: val })"
			type="daterange"
			range-separator="-"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			size="mini"
			style="width: 250px"
			value-format="yyyy-MM-dd"
		>
		</el-date-picker>
	</div>
</template>

<script>
import moment from 'moment'
export default {
	props: {
		/** value
		property: type: [String, Number],
		property: dates: Array
		 */
		value: Object
	},
	data() {
		return {
			options: [
				{
					label: '今日',
					type: 1
				},
				{
					label: '昨日',
					type: 2
				},
				{
					label: '本周',
					type: 3
				},
				{
					label: '本月',
					type: 4
				},
				{
					label: '本年',
					type: 5
				}
			]
		}
	},
	computed: {},
	mounted() {},
	methods: {
		valueChange(type) {
			const dateForm = {
				type,
				dates: this.value.dates
			}
			const { startTime, endTime } = convertDateSelectValue(dateForm)

			this.$emit('value-change', {
				type,
				dates: [startTime, endTime]
			})
		}
	},
	components: {}
}

export function convertDateSelectValue(dateForm) {
	if (dateForm.type == 1) {
		return {
			startTime: moment().format('yyyy-MM-DD') + ' 00:00:00',
			endTime: moment().format('yyyy-MM-DD') + ' 23:59:59'
		}
	} else if (dateForm.type == 2) {
		return {
			startTime:
				moment().subtract(1, 'days').format('yyyy-MM-DD') + ' 00:00:00',
			endTime: moment().subtract(1, 'days').format('yyyy-MM-DD') + ' 23:59:59'
		}
	} else if (dateForm.type == 3) {
		return {
			startTime: moment().isoWeekday(1).format('yyyy-MM-DD') + ' 00:00:00',
			endTime: moment().format('yyyy-MM-DD') + ' 23:59:59'
		}
	} else if (dateForm.type == 4) {
		return {
			startTime: moment().startOf('month').format('yyyy-MM-DD') + ' 00:00:00',
			endTime: moment().format('yyyy-MM-DD') + ' 23:59:59'
		}
	} else if (dateForm.type == 5) {
		return {
			startTime: moment().startOf('year').format('yyyy-MM-DD') + ' 00:00:00',
			endTime: moment().format('yyyy-MM-DD') + ' 23:59:59'
		}
	} else if (dateForm.type == '') {
		const [startTime, endTime] = dateForm.dates
		return {
			startTime: startTime ? startTime + ' 00:00:00' : '',
			endTime: endTime ? endTime + ' 23:59:59' : ''
		}
	}
}
</script>

<style lang="scss" scoped="scoped">
.option {
	font-size: 14px;
	color: #666;
	line-height: 32px;
	padding-right: 8px;
	cursor: pointer;
	&--active {
		color: #5f88ff;
	}
}
</style>
